<html>
    <head>
        <title>Home Page——Project OTS</title>
        <link rel="stylesheet" href="/style.css" type="text/css" />
        <script src="/jquery-3.3.1.js"></script>
    </head>
    <body class="body">
        <div class="cbl" >
            <div class="cblcenter" >
                <div class="sign"> Project OTS</div>
                <div id="userstatus" style="display: {{statusvi}};">
                    <div style="margin-left:10px;">{{greeting}}，{{username}}！</div>
                    <div class="inputclass">
                        <form action="/signout" method="post" style="width:110px;float:right;margin-left:5px;">
                            <button class="inputbutton" type="submit">登出</button>
                        </form>
                        <form action="/changepwd" method="post" style="width:110px;margin-right:5px;">
                            <button class="inputbutton" type="submit">修改密码</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="copyright">©2019 CrystalRays</div>
        </div>
        <div class="content">
            <a href="/admin/题库管理" id="back" >&lt;</a>
            <div class="tittlebar">
                <span class="tittle">题库编辑:{{basename}}</span>
                <div class="line"></div>
                <div  style="padding: 0px 10px 0px 10px;">
                    <div class="tittlebar">
                        {% for i in  type_list%}
                        <span class="tittle" id="{{i[0]}}" style="margin-right:10px;cursor: hand;" >{{i[0]}}</span>
                        {% endfor %}
                        <span id="add1"></span>
                        <span class="tittle" id="*" style="margin-right:10px;cursor: hand;display:none;" >新建</span>
                        <div class="line"></div>
                    </div>
                    {% for each in range(0,len) %}
                    <div id="{{type_list[each][0]}}" style="display: none;">
                        <form class="questionbox" >
                            <div style="float:left;width:40px;">*
                               
                            </div> 
                            <button name="id" type="button" value="*" style="margin-bottom:10px;float:right;">添加</button>
                                <input name="scorecalc" value="standard" style="width:100px;float:left;">
                                <div id="status" style="font-size:18px;padding-left:20px;font-size:18px;padding-left:20px;width:200px;display:inline-block;text-align:center;">waiting</div>

                            <div style="position: relative;margin-left:50px;font-size: 18px;font-family: 'Microsoft Yahei UI Light';">
                                <textarea style="height: 200px;width:100%;max-width:100%;resize:vertical;font-family: 'Microsoft Yahei UI';font-size:15px;" name="question"></textarea>
                                <textarea style="height: 200px;width:100%;max-width:100%;resize:vertical;font-family: 'Microsoft Yahei UI';font-size:15px;" name="answer" placeholder="每个采分点占一行，同一个采分点里同时答到才给分的用&&&间隔，答到一个就给分的用|||间隔，不能答到的用!!!前缀，完全匹配答案请不要加间隔或前缀符。"></textarea>
                            </div>
                        </form>
                        {% for i in question_list[each]%}
                        <form class="questionbox" >
                            <div style="float:left;width:40px;">{{ i[0] }}
                            </div>
                            <button name="id" type="button" value="{{i[0]}}" style="margin-bottom:10px;float:right;">保存</button>
                            <input name="scorecalc" value="{{i[3]}}" style="width:100px;float:left;">
                            <div id="status" style="font-size:18px;padding-left:20px;font-size:18px;padding-left:20px;width:200px;display:inline-block;text-align:center;">载入成功</div>

                            <div style="position: relative;margin-left:50px;font-size: 18px;font-family: 'Microsoft Yahei UI Light';">
                                <textarea style="height: 200px;width:100%;max-width:100%;resize:vertical;font-family: 'Microsoft Yahei UI';font-size:15px;" name="question">{{i[1]}}</textarea>
                                <textarea style="height: 200px;width:100%;max-width:100%;resize:vertical;font-family: 'Microsoft Yahei UI';font-size:15px;" name="answer">{{i[2]}}</textarea>
                            </div>
                        </form>
                        {% endfor %}
                        <div id="add3"></div>
                    </div>
                    {% endfor %}
                    <div id="add2"></div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function(){
                $("div#{{type_list[0][0]}}").css("display","block");
                $("span#{{type_list[0][0]}}").css({"background-color":"#09F","color":"#FFF"});
                $(document).on("click","span[class='tittle'][id]",function(){
                    $(this).siblings("span[class='tittle'][id]").css({"background-color":"whitesmoke","color":"#09F"});
                    $(this).css({"background-color":"#09F","color":"#FFF"});
                    $("div#"+this.id).css("display","block");
                    $("div#"+this.id).siblings("div[id]").css("display","none");
                })
                $(document).on("click","button",function(){
                    su=this;
                    $.post("/tksave",'&question='+encodeURIComponent($(su).parent().find("textarea[name='question']").val())+"&"+"answer="+encodeURIComponent($(su).parent().find("textarea[name='answer']").val())+"&id="+$(su).val()+"&scorecalc="+$(su).nextAll("input[name='scorecalc']").val()+"&type="+$(su).parent().parent().attr('id')+"&basename={{basename}}",function(data,status){
                        if($(su).val()=="*"){
                            if(data!="添加失败")
                            {
                                $(su).parent().parent().find("#add3").before(data);
                                $(su).nextAll("#status").html("添加成功");
                            }
                            else
                            {
                                $(su).nextAll("#status").html(data);
                            };
                        }
                        else{
                            $(su).nextAll("#status").html(data);
                        };
                    });
                });
            });
        </script>
    </body> 
</html> 